<template>
    <div class="com-container">
        <div class="com-chart" ref="seller_ref"></div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      chartInstance: null,
      allData: null,
      pageSize: 5,
      currentPage: 1,
      totalPage: 0,
      timerId: null
    }
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme () {
      this.chartInstance.dispose()
      this.initChart()
      this.screenAdapter()
      this.getData()
    }
  },
  mounted () {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    // 当页面加载完成后主动进行屏幕适配
    this.screenAdapter()
  },

  destroyed () {
    if (this.timerId != null) {
      clearInterval(this.timerId)
    }
    // 销毁屏幕监听器
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 初始化 echartInstance对象
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref, this.theme)
      // 对图表初始化的控制
      const initOption = {
        title: {
          text: '📍商家销售统计',
          left: 20,
          top: 20
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          botton: '3%',
          containLabel: true // 距离包含坐标轴上的文字
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category'
        },
        tooltip: { // 文字提示
          trigger: 'axis', // 触发条件
          axisPointer: { // 触发效果
            type: 'line',
            z: 0, // 层级设置
            lineStyle: {
              color: '#2D3443'
            }
          }
        },
        series: [
          {
            type: 'bar',
            label: { // 显示值
              show: true,
              position: 'right',
              textStyle: {
                color: 'white'
              }
            },
            itemStyle: { // 柱状图中的每一项
              // 颜色渐变 (方向, 不同百分比下的颜色值)
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                // 0% - 100%
                { offset: 0, color: '#5052EE' }, { offset: 1, color: '#AB6EE5' }
              ])
            }
          }
        ]
      }
      this.chartInstance.setOption(initOption)
      // 对图表对象进行鼠标事件监听,鼠标移入事件
      this.chartInstance.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      // 鼠标移出事件
      this.chartInstance.on('mouseout', () => {
        this.startInterval()
      })
    },

    // 屏幕适配器
    screenAdapter () {
      const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
      // 屏幕分辨率配置项目
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        tooltip: { // 文字提示
          axisPointer: { // 触发效果
            lineStyle: {
              width: titleFontSize
            }
          }
        },
        series: [
          {
            barWidth: titleFontSize, // 柱子宽度
            itemStyle: { // 柱状图中的每一项
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      // 手动效用图表对象的resize重绘图表
      this.chartInstance.resize()
    },

    // 获取服务器数据
    async getData () {
      const { data: reult } = await this.$http.get('seller')
      this.allData = reult
      this.allData.sort((a, b) => a.value - b.value)
      this.totalPage = Math.ceil(this.allData.length / this.pageSize)
      this.updateChart()
      this.startInterval()
    },

    // 更新图表
    updateChart () {
      const showData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.pageSize * this.currentPage) // [start, end)
      const sellerName = showData.map(item => item.name)
      const sellerValue = showData.map(item => item.value)
      const dataOption = {
        yAxis: {
          data: sellerName
        },
        series: [
          {
            data: sellerValue
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },

    // 动态效果
    startInterval () {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(() => {
        if (++this.currentPage > this.totalPage) {
          this.currentPage = 1
        }
        this.updateChart()
      }, 3000)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
